<template>
    <div>
        <span  v-show="$store.state.showUser" class="cursor">
            <a-icon type="shopping-cart" class="shop"/>
            <span>|</span>
            <span class="user" @click="showModal">登录/注册</span>
            <a-icon type="user" class="user1"/>
        </span>
        <span v-show="!$store.state.showUser" class="cursor">
            <a-badge :count="$store.state.num"><a-icon type="shopping-cart" class="shop"/></a-badge>
            <span>|</span>
            <a-dropdown>
                <a class="ant-dropdown-link user" @click="e => e.preventDefault()">
                  {{$store.state.userInfo.nickname}}
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                      <router-link to="/mine" tag="li">
                          <a href="javascript:;">个人中心</a>
                      </router-link>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">我的课程</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;">我的订单</a>
                  </a-menu-item>
                      <a-menu-item>
                    <a href="javascript:;" @click="exit">退出登录</a>
                  </a-menu-item>
                </a-menu>
            </a-dropdown>
            <a-avatar :src="$store.state.userInfo.avatarUrl" class="user1"/>
        </span>
        <a-modal v-model="$store.state.login" :footer="null" @ok="handleOk" @cancel="shutDown">
            <a-tabs default-active-key="1" >
                <a-tab-pane key="1" tab="普通登录">
                    <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                        <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                            <a-input
                                    v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入账号!' }] },
        ]"
                                    placeholder="请输入账号"
                            >
                                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-item>
                        <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                            <a-input
                                    v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码!' }] },
        ]"
                                    type="password"
                                    placeholder="请输入密码"
                            >
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            <a-button
                                    type="primary" html-type="submit"
                                    :disabled="hasErrors(form.getFieldsError())" style="width: 100%"
                            >
                                登录
                            </a-button>
                        </a-form-item>
                        <span>立即注册!</span>
                        <span style="float: right"> 忘记密码?</span>
                        <div style="clear: both"></div>
                    </a-form>
                </a-tab-pane>
                <a-tab-pane key="2" tab="手机登录" force-render>
                    <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                        <a-form-item :validate-status="userNameError() ? 'error' : ''" :help="userNameError() || ''">
                            <a-input
                                    v-decorator="[
          'userName',
          { rules: [{ required: true, message: '请输入账号!' }] },
        ]"
                                    placeholder="请输入账号"
                            >
                                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                        </a-form-item>
                        <a-form-item :validate-status="passwordError() ? 'error' : ''" :help="passwordError() || ''">
                            <a-input
                                    v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入验证码!' }] },
        ]"
                                    type="password"
                                    placeholder="请输入验证码"
                            style="width: 55%">
                                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                            </a-input>
                            <a-button type="primary" :style="{'width': '40%','float': 'right','margin-top': '5px','background-color': color,'border':'0','color':textColor,}" :disabled='changeDisabled' @click="getVerification" v-text="verification"></a-button>
                            <div style="clear: both"></div>
                        </a-form-item>
                        <a-form-item>
                            <a-button
                                    type="primary" html-type="submit"
                                    :disabled="hasErrors(form.getFieldsError())" style="width: 100%"
                            >
                                登录
                            </a-button>
                        </a-form-item>
                        <span>立即注册!</span>
                        <span style="float: right"> 忘记密码?</span>
                        <div style="clear: both"></div>
                    </a-form>
                </a-tab-pane>
            </a-tabs>
        </a-modal>

    </div>
</template>

<script>
    import {login,exit1} from '../api/api'
    function hasErrors(fieldsError) {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    export default {
        name: "User",
        data(){
                return {
                    hasErrors,
                    form: this.$form.createForm(this, { name: 'horizontal_login' }),
                    verification:'获取验证码',
                    sum : 59,
                    color:'#22db9b',
                    textColor:'white',
                    changeDisabled:false
                }
        },
        methods: {
            showModal() {
                this.$store.commit('changLogin',true)
            },
            handleOk() {
                this.$store.commit('changLogin',false)
            },
            shutDown(){
                this.$store.commit('changLogin',false)
            },
            // Only show error after a field is touched.
            userNameError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('userName') && getFieldError('userName');
            },
            // Only show error after a field is touched.
            passwordError() {
                const { getFieldError, isFieldTouched } = this.form;
                return isFieldTouched('password') && getFieldError('password');
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        // console.log('Received values of form: ', values);
                        login(values.userName,values.password).then(res=>{
                            if(res.code == 0){
                                // console.log(res)
                                // this.login = false;
                                this.$store.commit('changLogin',false)
                                this.$store.commit('change',res)
                                // this.showUser = false;
                                this.$message.success('登录成功，欢迎回来!');
                                // this.userInfo = res.userInfo;
                                // this.num = res.userInfo.roles.length
                            }else {
                                this.$message.warning('用户不存在/密码错误');
                            }
                        }).catch(err=>{
                            console.log(err)
                        })
                    }
                });
            },
            //退出
            exit(){
                exit1().then(res=>{
                    if(res.code==0){
                        if(this.$route.path != '/index'){
                            this.$router.push('/index');
                        }
                        this.$store.commit('changeExit')
                    }
                })
            },
            //验证码
            getVerification(){
                var time = setInterval(()=>{
                    if(this.sum>0){
                        this.verification = this.sum-- + ' s'
                        this.color = 'white'
                        this.textColor = '#22db9b'
                        this.changeDisabled = true
                    }else {
                        this.verification = '获取验证码'
                        this.sum = 59
                        this.color = '#22db9b'
                        this.textColor = 'white'
                        this.changeDisabled = false
                        clearInterval(time)
                    }
                },1000)
            }
        },
        mounted() {
            this.$nextTick(() => {
                // To disabled submit button at the beginning.
                this.form.validateFields();
            });
        },
        created() {
            this.$store.dispatch('changeUser');

        }
    }
</script>

<style scoped>
    /deep/a {
        color: black;
    }
    .cursor:hover {
        cursor:pointer;
    }
    .shop {
        font-size: 20px;
        margin-right: 10px;
        vertical-align: middle
    }
    .user {
        margin-right: 10px;
        margin-left: 10px;
    }
    .user1 {
        width: 32px;
        height: 32px;
        font-size: 16px;
        line-height: 32px;
        background-color: rgb(204,204,204);
        color:white;
        border-radius: 50%;
        vertical-align: middle
    }
    /deep/.ant-badge-count {
        min-width: 16px;
        height: 16px;
        right: 10px;
        line-height: 16px;
        padding: 0;
    }
    /*登录框*/
    /deep/.ant-modal-content{
        width: 360px;
        height: 310px;
        padding: 20px 36px 24px;
        margin: auto;
    }
    /deep/.ant-tabs-tab{
        width: 50%;
        text-align: center;
    }
    /deep/.ant-modal-body {
        padding: 0;
    }
    /deep/.ant-tabs-nav {
        width: 85%;
    }

</style>